import React, { useEffect, useState } from 'react';
import { Button, Upload, UploadFile } from 'antd'
import './style.css'
import axios from 'axios'
import { UploadChangeParam } from 'antd/es/upload';

// const Index: React.FC = () => {
//   // 获取节点 ref
//   const inputRef = React.useRef<HTMLInputElement | null>(null)
//   // 上传的图片的base64的数组集合
//   const [urls, setUrls] = useState<string[]>([]);
//   useEffect(() => {
//     axios.get('/api/upload/list').then(resp => {
//       setUrls(resp.data.data)
//     })
//   }, [])
//   // 开关：拖拽是否进入 upload 区域
//   // true  进入
//   // false 离开
//   const [isEnter, setIsEnter] = useState(false);
//   // 点击上传事件
//   const handleClick = () => inputRef.current?.click()
//   // 监听选中文件改变事件
//   const onChange = () => {
//     // 获取input节点
//     const input = inputRef.current as HTMLInputElement;
//     // 获取上传的文件列表并转化为数据
//     const files = Array.from(input.files as FileList);
//     // 遍历文件列表
//     files.forEach(file => {
//       // 调用上传函数
//       upload(file)
//     })
//   }
//   // 上传文件函数
//   const upload = async (file: File) => {
//     const formData = new FormData()
//     formData.append('file', file, file.name)
//     const resp = await axios.post('/api/upload', formData)
//     const { data } = resp.data;
//     setUrls(urls => [...urls, data])
//   }

//   // 拖放在 目标元素 松手事件
//   const onDrop = (e: React.DragEvent<HTMLDivElement>) => {
//     // 阻止默认行为： 浏览起默认会打开图片
//     e.preventDefault();
//     // 获取拖拽的文件列表
//     const files = Array.from(e.dataTransfer.files);
//     // 遍历上传
//     files.forEach(file => {
//       upload(file)
//     })
//     // 开关
//     setIsEnter(false)
//   }
//   return (
//     <div>
//       <h1>上传到服务器</h1>
//       <input
//         multiple
//         ref={inputRef}
//         type="file"
//         style={{ display: 'none' }}
//         onChange={() => onChange()}
//       />
//       <div 
//         className='upload' 
//         onDrop={(e) => onDrop(e)} 
//         onDragOver={e => e.preventDefault() /* 阻止默认行为： 浏览器默认不会触发onDrop */}
//         onDragEnter={() => setIsEnter(true)}
//         onDragLeave={() => setIsEnter(false)}
//         style={{ 
//           border: isEnter ? '1px solid blue' : '1px #ccc dashed',
//           background: isEnter ? 'skyblue': 'white'
//          }}
//       >
//         <Button onClick={() => handleClick()}>点击上传</Button>
//         <h2>
//           { isEnter ? '释放上传的文件' : '拖拽进入该区域上传'}
//         </h2>
//       </div>

//       <div>
//         {
//           urls.map((v, i) => {
//             return <img key={i} src={v} height={100} style={{ margin: 10 }} alt="" />
//           })
//         }
//       </div>
//     </div>
//   )
// }


const Index: React.FC = () => {
  const [urls, setUrls] = useState<string[]>([]);
  useEffect(() => {
    axios.get('/api/upload/list').then(resp => {
      setUrls(resp.data.data)
    })
  }, [])
  const onChange = (e: UploadChangeParam<UploadFile<any>>) => {
    if (e.file.response) {
      const { data } = e.file.response;
      setUrls(urls => [...urls, data])
    }
  }
  return (
    <div>
      <Upload.Dragger
        multiple
        itemRender={() => ""}
        action="/api/upload"
        onChange={e => onChange(e)}>
        <div style={{ height: 300 }}>
          <Button>点我上传</Button>
        </div>
      </Upload.Dragger>

      <div>
        {
          urls.map((v, i) => {
            return <img key={i} src={v} height={100} style={{ margin: 10 }} alt="" />
          })}
      </div>
    </div>
  )
}

export default Index
